 <!-- 宠物安全认证 -->
 <template>
 	<view class="pet-container">
 		<block-view>
			<view class="auth-desc">
				上传您爱宠的安全资料，如犬证、疫苗证明等，有利于在参与活动时保障您和其他宠友与爱宠的安全，上传后您的宠物将获得专属标识，
				帮助您更便捷的参与活动哦！（我们承诺对您的爱宠信息进行保密）
			</view>
		</block-view>
		
		<block-view padding-top="10">
			<!--  -->
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="宠物名"></uni-section>
				<view class="pet-name">
					<input class="ipt" type="text" placeholder="请输入宠物名" v-model="formData.name" />
				</view>
			</view>
			<!--  -->
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="宠物类型"></uni-section>
				<view class="pet-name no-border">
					<view class="radio-list">
						<view class="radio-item" :class="{'radio-active': formData.type == item.value}"
							v-for="(item, index) in petData" :key="item.value" @click="formData.type = item.value">
							<view class="radio-mark">
								<uni-icons v-if="formData.type == item.value" type="checkmarkempty" :size="12"
									color="#fff"></uni-icons>
							</view>
							<view>{{ item.text }}</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="添加宠物图片"></uni-section>
				<view class="pet-name no-border">
					<image-upload @change="imageChange('pet_img', $event)" :image-arr="formData.pet_img?[formData.pet_img]:[]"></image-upload>
				</view>
			</view>
			<!--  -->
			<view class="form-item" v-if="formData.type == 2">
				<uni-section title-font-size="30rpx" type="line" title="养犬证"></uni-section>
				<view class="pet-name">
					<input class="ipt" type="text" placeholder="请输入证书编号" v-model="formData.dog_cert_no" />
				</view>
				<view class="pet-name no-border top-distance">
					<image-upload upload-text="上传证书图片" :image-arr="formData.dog_cert_img?[formData.dog_cert_img]:[]" @change="imageChange('dog_cert_img', $event)"></image-upload>
				</view>
			</view>
			<!--  -->
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="疫苗证"></uni-section>
				<view class="pet-name" v-if="formData.type == 2">
					<input class="ipt" type="text" placeholder="请输入疫苗证编号" v-model="formData.vaccine_cert_no" />
				</view>
				<view class="pet-name no-border" :class="{'top-distance': formData.type == 2}">
					<image-upload upload-text="上传证书图片" :image-arr="formData.vaccine_cert_img?[formData.vaccine_cert_img]:[]" @change="imageChange('vaccine_cert_img', $event)"></image-upload>
				</view>
			</view>
		</block-view>
 	</view>
 
	<fixed-footer>
		<primary-btn title="完成" :disabled="btnDisabled" @btnClick="submit()"></primary-btn>
	</fixed-footer>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
 				formData: {
					name: '',
					type: 2,
					pet_img: '',  // 宠物图片
					dog_cert_no: '',  // 养犬证编号
					dog_cert_img: '',  // 养犬证照片
					vaccine_cert_no: '',  // 疫苗编号
					vaccine_cert_img: ''  // 疫苗照片
				},
				isEdit: false,
				auth_id: 0,
				petData: [
					{
						text: '狗狗',
						value: 2
					},{
						text: '猫猫',
						value: 1
					},				
					/* {
						text: '不限',
						value: 3
					} */
				],
 			}
 		},
		computed: {
			btnDisabled() {
				const { name,pet_img,dog_cert_no,dog_cert_img,vaccine_cert_no,vaccine_cert_img } = this.formData
				let b = true
				if (this.formData.type == 2) {
					if (name && pet_img && dog_cert_no && dog_cert_img && vaccine_cert_no && vaccine_cert_img) {
						b = false
					}
				} else {
					if (name && pet_img && vaccine_cert_no && vaccine_cert_img) {
						b = false
					}
				}
				return b
			}
		},
		onLoad(options) {
			if (options.isEdit) {
				this.getPetAuthInfo()
			}
		},
 		methods: {
			async submit() {
				let data = {}
				if (this.formData.type == 1) {
					let { dog_cert_no, dog_cert_img, ...d } = this.formData
					data = d
				} else {
					data = {...this.formData}
				}				
				const res = await this.$request.post('api/pet_cert/create', data)
				if (res.code == 200) {
					uni.showToast({
						title: '已提交，资料审核中',
						icon: 'none'
					})
					uni.$emit('updateUserInfo')
					setTimeout(() => {
						uni.navigateBack()
					}, 1600)
				}
			},
 			imageChange(type, images) {
				this.formData[type] = images != false ? images[0] : ''
			},
			async getPetAuthInfo() {
				const res = await this.$request.get('/api/pet_cert/detail')
				if (res.code == 200) {
					const data = res?.data || {}
					this.auth_id = data?.id || 0
					for (let key in this.formData) {
						if (this.formData.hasOwnProperty(key)) {
							this.formData[key] = data[key]
						}
					}
				}
			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	.pet-container {
		padding: 16rpx 30rpx;
		padding-bottom: 200rpx;
		
		.auth-desc {
			font-size: 26rpx;
			color: #7B7B7B;
			line-height: 44rpx;
		}
		.form-item {
			margin-bottom: 20rpx;
			
			.pet-name {
				font-size: 26rpx;
				box-sizing: border-box;
				padding: 10rpx 0 20rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
			.no-border {
				border-bottom: 0;
				padding-bottom: 0;
			}
			.top-distance {
				margin-top: 20rpx;
			}
			.ipt {
				
			}
			.radio-list {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				row-gap: 20rpx;
				column-gap: 20rpx;
				padding-bottom: 5px;
			
				.radio-item {
					height: 60rpx;
					border-radius: 8px;
					background-color: #f6f6f6;
					border: 0.5px solid #f6f6f6;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
			
					.radio-mark {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #999;
						margin-right: 8rpx;
					}
				}
			
				.radio-active {
					background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
					border-color: $uni-color-primary;
			
					.radio-mark {
						background-color: $uni-color-primary;
						border-color: $uni-color-primary;
					}
				}
			}
		}
		
	}
 </style>